<template>
    <div>
<div>
      <label>用户名</label>
      <input type="text" v-model="username" />
    </div>
    <div>
      <label>密码</label>
      <input type="password" v-model="password" />
    </div>
    <button @click="onLogin">登录</button>
    <div v-if="loginError">登录失败</div>
    </div>
</template>

<script>
    
    import {mapState,mapActions} from "vuex"
        export default {
        data() {
            return {
                username:'',
                password:'',
                loginError:false
            }
        },
        methods: {
            ...mapActions(["login"]),
            async onLogin(){
                 await this.login({
                     username:this.username,
                     password:this.password
                 });
                 if(this.user&&this.user.username){
                     window.location.href="https://m.baidu.com";
                 }else{
                     this.loginError = true;
                 }
            }
        },
        computed: {
            ...mapState({
                user:state => state.user
            })
        },

    }
</script>

<style lang="sass" scoped>

</style>